import React, { forwardRef, useState, useImperativeHandle } from 'react';
import { Modal, Form, Input, Select, Table } from 'antd';
import moment from 'moment';
import { Querier } from '@/components';
import enums from '@/enums';
import { useOperationLogList } from './hooks';

/**
 * 日志列表
 */
function OperationLogList() {
    const [form] = Form.useForm();

    const operationLogList = useOperationLogList({ form });

    return (
        <>
            <Querier
                form={form}
                items={[
                    {
                        label: '导入任务名称',
                        name: 'resourceName',
                        initialValue: '',
                        children: <Input allowClear placeholder="请输入导入任务名称" />,
                    },
                    {
                        label: '操作人',
                        name: 'operator',
                        initialValue: '',
                        children: <Input allowClear placeholder="请输入操作人" />,
                    },
                    {
                        label: '操作类型',
                        name: 'operatorCode',
                        initialValue: undefined,
                        children: (
                            <Select
                                allowClear
                                showSearch
                                optionFilterProp="label"
                                options={enums.ossImport.operationLogTypes.options()}
                                placeholder="请选择"
                            />
                        ),
                    },
                ]}
                onQuery={operationLogList.search.submit}
            />
            <Table
                style={{ marginTop: 10 }}
                rowKey="subId"
                scroll={{ x: 'max-content' }}
                columns={[
                    {
                        title: '操作人',
                        dataIndex: 'operator',
                        render: (text) => text ?? '-',
                    },
                    {
                        title: '操作类型',
                        dataIndex: 'operatorCode',
                        render: (value) => enums.ossImport.operationLogTypes.get(value) ?? '-',
                    },
                    {
                        title: '导入任务名称',
                        dataIndex: 'resourceName',
                        render(text, { resourceId }) {
                            return (
                                <>
                                    <div>{text ?? '-'}</div>
                                    <div>{resourceId ?? '-'}</div>
                                </>
                            );
                        },
                    },
                    {
                        title: '操作时间',
                        dataIndex: 'operateTime',
                        render: (text) => (moment(text).isValid() ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-'),
                    },
                ]}
                {...operationLogList.tableProps}
                pagination={{
                    showSizeChanger: true,
                    showTotal: (total) => `共 ${total} 条`,
                    ...operationLogList.tableProps.pagination,
                }}
            />
        </>
    );
}

/**
 * 日志模态框
 */
function OperationLogModal(_, ref) {
    const [visible, setVisible] = useState(false);

    useImperativeHandle(ref, () => ({
        open() {
            setVisible(true);
        },
    }));

    return (
        <Modal
            destroyOnClose
            title="操作日志"
            width={800}
            open={visible}
            footer={null}
            onCancel={() => {
                setVisible(false);
            }}
        >
            <OperationLogList />
        </Modal>
    );
}

export default forwardRef(OperationLogModal);
